﻿<!DOCTYPE HTML>
<html>

<head>
    <title>{ms:global.name/}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="SiteName" content="{ms:global.name/}">
    <meta name="keywords" content="{ms:global.keyword/}">
    <meta name="description" content="{ms:global.descrip/}">
    <!-- 通用引入文件 -->
    <#include "head.htm">
    <script src="${base}/static/plugins/html2pdf/html2pdf.bundle.min.js"></script>
    <script src="${base}/static/plugins/html2docx/html-docx.js"></script>
    <script src="${base}/static/plugins/file-saver/Blob.js"></script>
    <script src="${base}/static/plugins/file-saver/FileSaver.js"></script>
</head>

<body>
<!-- 通用头部 -->
<#include "header.htm">

<div class="newstop fadeInUp wow" data-wow-delay="1s">
    <div class="w1200">
        <h3 class="fadeInDown wow" data-wow-delay="1.3s">${field.title}</h3>
        <div class="newstitle  fadeInDown wow" data-wow-delay="1.4s">
            <span>${field.date?substring(0,10)}</span>
            <span>${field.source}</span>
        </div>
        <div class="newsfoot clearfix">
            <div class="newsfootz fadeInLeft wow" data-wow-delay="1s">
                <span>发布人：${field.author}</span>
                <span>阅读量：${field.hit}</span>
            </div>
            <div class="newsfooty fadeInRight   wow clearfix" data-wow-delay="1s">
                <div class="download" onclick="exportDocx()" style="color: #ffffff; display: inline-block; vertical-align: middle; font-size: 15px;padding-right: 20px;cursor: pointer;">下载</div>
                <div class="newsfont">
                    <span>字体：</span>
                    <a href="javascript:doZoom(14)"><img
                            src="/{ms:global.style/}/images/icon29.png" alt="" /></a>
                    <a href="javascript:doZoom(18)"><img
                            src="/{ms:global.style/}/images/icon30.png" alt="" /></a>
                </div>
                <!-- <div class="newsshare" id="fenxing">
                    <div class="bdshare-button-style0-16" data-bd-bind="1587525028609">
                        <a href="#" class="bds_more" data-cmd="more"></a>
                        <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
                        <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
                        <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                    </div>
                    <script>window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script>
                </div> -->
            </div>
        </div>

    </div>
</div>
<div id="Zoom" class="newscenter fadeInUp wow" data-wow-delay="1.5s"
     style="font-size: 16px;color: #666666;line-height:2;">
    <div style="text-align: center;font-size: 0;">
        <h1>${field.title}</h1>
        <h4 style="font-weight: normal;">作者：${field.author}&nbsp;&nbsp;&nbsp;&nbsp;发布时间：${field.date?date?string("yyyy-MM-dd")}</h4>
    </div>
    ${field.content}
</div>
<div class="recommend fadeInUp wow" data-wow-delay="0.5s">
    <div class="recommendtop">
        <h2>推荐新闻<i>Recommended news</i></h2>
    </div>
    <div class="graphic_list fadeInUp wow" data-wow-delay="1s">
        <div class="swiper-container" id="newstj">
            <!-- 推荐文章用推荐属性进行配置 -->
            <div class="swiper-wrapper">
                {ms:arclist size="6" flag="c"}
                <div class="swiper-slide">
                    <a href="{ms:global.url/}${field.link}" target="_blank"
                       title="${field.title}">
                        <img src="{ms:global.host/}{@ms:file field.litpic/}" alt="${field.title}" />
                    </a>
                    <span>${field.date?date?string("yyyy-MM-dd")}</span>
                    <h3><a href="{ms:global.url/}${field.link}" target="_blank"
                           title="${field.title}">${field.title}</a></h3>
                    <i></i>
                </div>
                {/ms:arclist}
            </div>
        </div>
    </div>
</div>

<div class="Parttwo fadeInUp wow" data-wow-delay="1s">
    <div class="w1200">
        <#if pre.title?has_content>
        <a href="{ms:global.url/}${pre.link}" class="upper">
        </a>
        <#else>
        <a class="upper">
        </a>
    </#if>
    <a href="{ms:global.url/}${field.typelink}" class="return">返回列表</a>
    <#if next.title?has_content>
    <a href="{ms:global.url/}${next.link}" class="lower">
        <#else>
        <a class="lower">
        </a>
    </#if>
    </a>
</div>
</div>
<!-- 通用底部 -->
<#include "footer.htm">
</body>

</html>
<script>
    var len = '2';
    var mySwiper = new Swiper('#newstj', {
        loop: parseInt(len) < 3 ? false : true,
        autoplay: false,
        speed: 1000,
        paginationClickable: true,
        grabCursor: true,
        parallax: true,
        breakpoints: {
            1920: {
                slidesPerView: 3, //设置同时显示的数量
                spaceBetween: 18, //在slide之间设置距离（单位px）
            },
            //当宽度大于等于12000
            1200: {
                slidesPerView: 3, //设置同时显示的数量
                spaceBetween: 18, //在slide之间设置距离（单位px）
            },
            1024: {
                slidesPerView: 3, //设置同时显示的数量
                spaceBetween: 10, //在slide之间设置距离（单位px）
            },
            768: {
                slidesPerView: 2, //设置同时显示的数量
                spaceBetween: 10, //在slide之间设置距离（单位px）
            },
            750: {
                slidesPerView: 1, //设置同时显示的数量
                spaceBetween: 10, //在slide之间设置距离（单位px）
            }
        }
    })
    function exportDocx(){
        var contentElem = document.getElementById("Zoom");
        convertChartsToBase64(contentElem)
        var converted = htmlDocx.asBlob(contentElem.innerHTML, {orientation: 'portrait', margins: {top: 720}});
        var contentTitle= "${field.title}";
        saveAs(converted, contentTitle + ".docx");
    }
    function convertChartsToBase64(contentDocument) {
        // 找到所有的图表 （echart）
        let canvases = contentDocument.querySelectorAll("canvas");
        // var reportchartsContainerArr = document.getElementsByClassName('report-charts-container')
        // 遍历图表，转换为 base64 静态图片
        if(canvases && canvases.length>0) {
            canvases.forEach((canvas, i) => {
                var url = canvas.toDataURL('image/jpg')
                let img = document.createElement("img");
                img.src = url;
                img.width='600'
                img.height='300'
                canvas.parentElement.replaceChild(img, canvas);
                // reportchartsContainerArr[i].appendChild(img)
                // canvas.parentNode.replaceChild(img, canvas);
            });
        }
    }
</script>